<!--
 * @Author: 尔尔
 * @Date: 2023-12-15 11:28:18
 * @LastEditors: 尔尔
 * @LastEditTime: 2024-01-26 11:46:03
 * @FilePath: \ERP\src\views\components\ApproveTemplete\index.vue
 * @filePurpose:
-->
<template>
	<div>
		<el-form ref="form" :model="form" :rules="rules" label-width="95px">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="" prop="approvalStatus">
						<el-radio-group v-model="form.approvalStatus">
							<el-radio label="2">审批通过</el-radio>
							<el-radio label="3">审批未通过</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" v-if="form.approvalStatus == '3'">
				<el-col :span="24">
					<el-form-item label="原因" prop="causeRejection">
						<el-input v-model="form.causeRejection" placeholder="请输入原因" type="textarea" :rows="3" maxlength="100" show-word-limit  />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="submitForm">确 定</el-button>
			<el-button @click="cancel">取 消</el-button>
		</div>
	</div>
</template>
<script>
export default {
	name: "approveTemplete",
  props:{
    openApprove: {
      type: Boolean,
      required: true,
      default: false,
    },
    labels: {
      type: String,
      required: false,
      default: '',
    },
  },
	data() {
		return {
			// 表单参数
			form: { approvalStatus: "2" },
			// 表单校验
			rules: {
				approvalStatus: [{ required: true, message: "审批状态不能为空", trigger: "blur" }],
				causeRejection: [{ required: true, message: "驳回原因不能为空", trigger: "blur" }]
			}
		}
	},
	watch: {
		openApprove: {
			handler(newVal, oldVal) {
				if (newVal) {
					this.resetForm()
				}
			},
			immediate: true
		}
	},
	methods: {
		resetForm() {
			this.form = {
				approvalStatus: "2",
				causeRejection: ""
			}
		},
		cancel() {
			this.$emit("cancelApprove", {
				flag: false
			})
		},
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					this.form.flag = true
					this.$emit("cancelApprove", this.form)
				}
			})
		}
	}
}
</script>
<style scoped lang="scss">
.dialog-footer {
	text-align: right;
}
</style>
